<!doctype html>
<html lang="en">

<head>
	<base href="{{asset('statics/punchcard')}}/" />
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

	<title>备注</title>
</head>

<body>
	<div class="container" id="app">
		<!-- 网页内容写在这里面 -->
		<div class="alert alert-warning alert-dismissible fade show" role="alert">
			<strong>hello @{{adminUserInfo.nickname}}!</strong> 您可以在此页面添加用户记录。
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="row justify-content-md-center">
			<div class="col-md-auto">
				<form>
					<div class="form-group">
						<label for="exampleInputEmail1">微信昵称</label>
						<input type="email" readonly class="form-control" v-model="userInfo.nickname" aria-describedby="emailHelp" placeholder="Enter email">
					</div>
					<div class="form-group">
						<label for="exampleInputEmail1">微信头像</label><br />
						<img style="width: 100px;" :src="userInfo.avatar" />
					</div>
					<div class="form-group">
						<label for="exampleInputEmail1">剩余次数</label>
						<input type="email" class="form-control" readonly v-model="userInfo.punch_num" aria-describedby="emailHelp" placeholder="输入次数">
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">日期</label>
						<input type="date" v-model="day" class="form-control" id="exampleInputPassword1" placeholder="输入备注">
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">备注</label>
						<input type="text" v-model="remark" class="form-control" id="exampleInputPassword1" placeholder="输入备注">
					</div>

					<button @click="submit" type="button" class="btn btn-primary">提交</button>
				</form>
			</div>
		</div>
	</div>


	<script src="js/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/mobile/layer.min.js"></script>
	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> -->
	<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> -->
</body>
<script>
	var vm = new Vue({
		el: '#app',
		data: function() {
			return {

				userInfo: @json($userInfo),
				adminUserInfo: @json($adminUserInfo),
				day: '',
				remark: '',
			}
		},
		methods: {
			submit: function() {
				var _this = this;
				var load_index = layer.open({
					type: 2,
					content: '提交中'
				});
				$.post('{{route("punch.card.mobileSub")}}', {
					day: _this.day,
					remark: _this.remark,
					user_id: _this.userInfo.id,
					_token: '{{csrf_token()}}'
				}).done(function(res) {
					//信息框
					layer.open({
						content: res.message,
						btn: '知道了',
						yes: function(index) {
							if (res.code) {
								window.location.href = "{{route('punch.card.lookList')}}?user_id={{$userInfo->id}}"
							}
							layer.close(index)
						}
					});


				}).fail().always(function() {
					layer.close(load_index)
				})
			}
		}
	})
</script>

</html>